<script setup>
import { toRaw, defineProps, defineEmits, reactive, ref, onMounted, watch } from 'vue';
import { deptSubmit, getUserList, getDeptList, getUserAllList } from '@/api';

const emits = defineEmits(['closed']);

const props = defineProps({
  action: String,
  isShowDialog: Boolean,
  deptItem: Object
});

// { action, deptItem, isShowDialog }

const deptForm = ref()
const state = reactive({
  deptForm: {
    parentId: [null],
  },
  deptList: [],
  userList: [],
  userMap: new Map(),
})

const rules = {
  // parentId: [
  //   { required: true, message: '请选择上级部门', trigger: 'blur' },
  // ],
  deptName: [
    { required: true, message: '请选输入部门名称', trigger: 'blur' },
  ],
  userName: [
    { required: true, message: '请选部门负责人', trigger: 'blur' },
  ],
}

onMounted(async () => {
  query()
})

const query = async () => {
  const list = await getUserAllList()
  state.userList = list
  for (const user of list) {
    state.userMap.set(user._id, toRaw(user))
  }
  state.deptList = await getDeptList(state.queryForm)
}

watch(() => props.isShowDialog, (val) => {
  console.log('isShowDialog: ', val)
  if (val === true) {
    state.deptForm.userName = props.deptItem.userId
    query()
  }
})

watch(() => props.deptItem, () => {
  console.log('props.deptItem', props.deptItem);
  state.deptForm = {
    ...props.deptItem
  }
})

const handelSubmit = () => {
  deptForm.value.validate(async (valid,) => {
    if (valid) {
      const user = state.userMap.get(state.deptForm.userName)
      console.log('state.deptForm.userName', state.deptForm.userName);
      let action = 'add'
      if (props.deptItem?._id) {
        action = 'edit'
      }
      const data = {
        action,
        _id: props.deptItem?._id,
        userName: user.userName,
        userEmail: user.userEmail,
        userId: user._id,
        deptName: state.deptForm.deptName,
        parentId: state.deptForm.parentId,
      }
      await deptSubmit(data)
      console.log('提交', data)
      emits('closed');
    }
  })
}

const handelChoiceUser = (value) => {
  const user = state.userMap.get(value);
  state.deptForm.userName = user._id;
  state.deptForm.userEmail = user.userEmail;
}

const handelClosed = () => {
  emits('closed');
  state.deptForm = {}
}
</script>
<template>
  <el-dialog :title="deptItem?._id ? '修改部门' : '创建部门'" :model-value="isShowDialog" @closed="handelClosed">
    <el-form ref="deptForm" :rules="rules" :model="state.deptForm" label-width="150">
      <el-form-item label="上级部门" prop="parentId">
        <el-cascader :options="state.deptList" :props="{ checkStrictly: true, value: '_id', label: 'deptName' }" clearable
          v-model="state.deptForm.parentId" placeholder="请选择上级部门" />
      </el-form-item>
      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="state.deptForm.deptName" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item label="负责人" prop="userName">
        <el-select placeholder="请选择部门负责人" @change="handelChoiceUser" v-model="state.deptForm.userName">
          <el-option v-for="user of state.userList" :key="user._id" :label="user.userName" :value="user._id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="负责人邮箱" prop="userEmail">
        <el-input v-model="state.deptForm.userEmail" disabled />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="emits('closed')">取消</el-button>
      <el-button @click="handelSubmit" type="primary">确认</el-button>
    </template>
  </el-dialog>
</template>